<template>
  <a-dropdown
    v-if="!disabled"
    :visible="visible"
    :trigger="['click']"
    placement="bottomCenter"
  >
    <div :id="`input${id}`" class="color-input" @click.stop="visible = true">
      <div v-if="display === 'color'">
        <div class="color-graph" :style="{ background: value }"></div>
        <a-input readony="readonly" :size="size" :value="value"></a-input>
      </div>
      <div v-else>自定义</div>
    </div>

    <div :id="id" ref="coloroverlay" slot="overlay" class="color-overlay">
      <sketch v-model="color" class="color-panel" @input="updateValue"></sketch>
      <a-button class="close-btn" type="primary" size="small" @click="save"
        >确&nbsp;&nbsp;定</a-button
      >
    </div>
  </a-dropdown>
  <div v-else :id="`input${id}`" class="color-input">
    <div class="color-graph" :style="{ background: value }"></div>
    <a-input
      :disabled="true"
      readony="readonly"
      :size="size"
      :value="value"
    ></a-input>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Sketch } from 'vue-color'

@Component({
  components: {
    sketch: Sketch,
  },
})
export default class ColorPicker extends Vue {
  public name: string = 'color-picker'
  id: string = `id${Math.random().toString(36).slice(-8)}`

  @Prop({
    type: String,
    default() {
      return 'color'
    },
  })
  display!: string

  @Prop({
    type: Boolean,
    default() {
      return false
    },
  })
  disabled!: boolean

  @Prop({
    type: String,
    default() {
      return 'small'
    },
  })
  size!: string

  @Prop({
    type: String,
    default() {
      return ''
    },
  })
  value!: string

  public color: any = {}

  public visible: boolean = false

  updateValue(value: any) {
    this.color = value
  }
  save() {
    if (this.color.a !== 1) {
      const color = `rgba(${this.color.rgba.r}, ${this.color.rgba.g}, ${this.color.rgba.b}, ${this.color.rgba.a})`
      this.$emit('input', color)
      this.$emit('change', color)
    } else {
      this.$emit('input', this.color.hex)
      this.$emit('change', this.color.hex)
    }
    this.visible = false
  }

  mounted() {
    this.color = this.value
    const that = () => this
    setTimeout(() => {
      /* eslint-disable */
      const colorpanel: any = (window as any).document.querySelector(
        `#${that().id}`
      )
      const callBack = function (event: Event): void {
        const input = (window as any).document.getElementById(
          `input${that().id}`
        )
        if (
          input &&
          (input.contains(event.target as any) || input === event.target)
        ) {
          return
        }
        const box = (window as any).document.getElementById(`${that().id}`)
        if (
          !(box && (box.contains(event.target as any) || box === event.target))
        ) {
          that().visible = false
        }
      }

      document.addEventListener('click', callBack)
      this.$once('hook:beforeDestroy', () => {
        document.removeEventListener('click', callBack)
      })
    }, 100)
  }
}
</script>

<style lang="less" scoped>
.color-input {
  position: relative;

  /deep/ .ant-kg-appl-input {
    padding-left: 26px;
    padding-right: 2px;
  }

  .color-graph {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
    height: 16px;
    left: 6px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    z-index: 20;
  }
}

.color-panel {
  padding-bottom: 36px !important;
}

.close-btn {
  left: 10px;
  position: absolute;
  transform: translateY(-36px);
  width: 200px;
  z-index: 1;
}
</style>
